<div class="modal" ng-controller="FlowableAssignmentPopupCtrl">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-hidden="true" class="close" data-dismiss="modal" ng-click="close()" type="button">&times;</button>
        <h2 translate>PROPERTY.ASSIGNMENT.TITLE</h2>
      </div>
      <div class="modal-body">
        <div class="detail-group clearfix">

          <div class="form-group clearfix">
            <div class="col-xs-12">
              <label class="col-xs-4">{{'PROPERTY.ASSIGNMENT.TYPE' | translate}}</label>

              <div class="col-xs-8">
                <div class="btn-group btn-group-justified">
                  <div class="btn-group">
                    <button class="btn btn-default" ng-class="{'active' : popup.assignmentObject.type == 'idm'}"
                            ng-click="popup.assignmentObject.type = 'idm'"
                            ng-model="popup.assignmentObject.type"
                            type="button">
                      {{'PROPERTY.ASSIGNMENT.TYPE.IDENTITYSTORE' | translate}}
                    </button>
                  </div>
                  <div class="btn-group">
                    <button class="btn btn-default" ng-class="{'active' : popup.assignmentObject.type != 'idm'}"
                            ng-click="popup.assignmentObject.type = 'static'"
                            ng-model="popup.assignmentObject.type"
                            type="button">
                      {{'PROPERTY.ASSIGNMENT.TYPE.STATIC' | translate}}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group clearfix" ng-show="popup.assignmentObject.type != 'idm'">
            <div class="col-xs-12">
              <label>{{'PROPERTY.ASSIGNMENT.ASSIGNEE' | translate}}</label>
            </div>
            <div class="col-xs-12">
              <input class="form-control" id="assigneeField" ng-model="popup.assignmentObject.static.assignee"
                     placeholder="{{'PROPERTY.ASSIGNMENT.ASSIGNEE_PLACEHOLDER' | translate}}"
                     type="text"/>
            </div>
          </div>

          <div class="form-group clearfix" ng-show="popup.assignmentObject.type != 'idm'">
            <div class="col-xs-12">
              <label>{{'PROPERTY.ASSIGNMENT.CANDIDATE_USERS' | translate}}</label>
            </div>
            <div class="col-xs-12" ng-repeat="candidateUser in popup.assignmentObject.static.candidateUsers">
              <input class="form-control" id="userField" ng-model="candidateUser.value" type="text"/>
              <i class="glyphicon glyphicon-minus clickable-property"
                 ng-click="removeCandidateUserValue($index)"
                 ng-if="popup.assignmentObject.static.candidateUsers.length >1"></i>
              <i class="glyphicon glyphicon-plus clickable-property"
                 ng-click="addCandidateUserValue($index)"
                 ng-if="$index == (popup.assignmentObject.static.candidateUsers.length - 1)"></i>
            </div>
          </div>

          <div class="form-group clearfix" ng-show="popup.assignmentObject.type != 'idm'">
            <div class="col-xs-12">
              <label>{{'PROPERTY.ASSIGNMENT.CANDIDATE_GROUPS' | translate}}</label>
            </div>
            <div class="col-xs-12" ng-repeat="candidateGroup in popup.assignmentObject.static.candidateGroups">
              <input class="form-control" id="groupField" ng-model="candidateGroup.value" type="text"/>
              <i class="glyphicon glyphicon-minus clickable-property"
                 ng-click="removeCandidateGroupValue($index)"
                 ng-if="popup.assignmentObject.static.candidateGroups.length >1"></i>
              <i class="glyphicon glyphicon-plus clickable-property"
                 ng-click="addCandidateGroupValue($index)"
                 ng-if="$index == (popup.assignmentObject.static.candidateGroups.length - 1)"></i>
            </div>
          </div>

          <div class="form-group clearfix" ng-show="popup.assignmentObject.type == 'idm'">
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label>{{'PROPERTY.ASSIGNMENT.IDM.TYPE' | translate}}</label>
              </div>
              <div class="col-xs-8">
                <div class="btn-group span">
                  <button activiti-fix-dropdown-bug
                          bs-select
                          class="selection" ng-model="assignmentOption"
                          ng-options="option as (option.title | translate) for option in assignmentOptions">
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group clearfix"
               ng-show="popup.assignmentObject.type == 'idm' && assignmentOption.id == 'users'">
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label>{{'PROPERTY.ASSIGNMENT.CANDIDATE_USERS' | translate}}</label>
              </div>
              <div class="col-xs-8 clearfix">
                <ul class="simple-list"
                    ng-show="popup.assignmentObject.idm.candidateUsers.length || popup.assignmentObject.idm.candidateUserFields.length">
                  <li ng-repeat="user in popup.assignmentObject.idm.candidateUsers">
                    <i class="icon icon-user"></i>
                    <span user-name="user"></span>

                    <div class="actions">
                      <a ng-click="removeCandidateUser(user)"><i class="icon icon-remove"></i></a>
                    </div>
                  </li>
                  <li ng-repeat="userField in popup.assignmentObject.idm.candidateUserFields">
                    <i class="icon icon-user"></i>
                    <span>{{userField.name}}</span>
                    <span class="field-type"> - {{userFieldField.id}}</span>

                    <div class="actions">
                      <a ng-click="removeCandidateUserField(userField)"><i class="icon icon-remove"></i></a>
                    </div>
                  </li>
                </ul>
                <div class="no-results"
                     ng-if="(!popup.assignmentObject.idm.candidateUsers || !popup.assignmentObject.idm.candidateUsers.length) && (!popup.assignmentObject.idm.candidateUserFields || !popup.assignmentObject.idm.candidateUserFields.length)">
                  {{'PROPERTY.ASSIGNMENT.IDM.NO_CANDIDATE_USERS' | translate}}
                </div>
              </div>
            </div>
          </div>

          <div class="form-group clearfix"
               ng-show="popup.assignmentObject.type == 'idm' && assignmentOption.id == 'groups'">
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label>{{'PROPERTY.ASSIGNMENT.CANDIDATE_GROUPS' | translate}}</label>
              </div>
              <div class="col-xs-8 clearfix">
                <ul class="simple-list"
                    ng-show="popup.assignmentObject.idm.candidateGroups.length || popup.assignmentObject.idm.candidateGroupFields.length">
                  <li ng-repeat="group in popup.assignmentObject.idm.candidateGroups">
                    {{group.name}}
                    <div class="actions">
                      <a ng-click="removeCandidateGroup(group)"><i class="icon icon-remove"></i></a>
                    </div>
                  </li>
                  <li ng-repeat="groupField in popup.assignmentObject.idm.candidateGroupFields">
                    {{groupField.name}}
                    <div class="actions">
                      <a ng-click="removeCandidateGroupField(groupField)"><i class="icon icon-remove"></i></a>
                    </div>
                  </li>
                </ul>
                <div class="no-results"
                     ng-if="(!popup.assignmentObject.idm.candidateGroups || !popup.assignmentObject.idm.candidateGroups.length) && (!popup.assignmentObject.idm.candidateGroupFields || !popup.assignmentObject.idm.candidateGroupFields.length)">
                  {{'PROPERTY.ASSIGNMENT.IDM.NO_CANDIDATE_GROUPS' | translate}}
                </div>
              </div>
            </div>
          </div>

          <div class="form-group clearfix"
               ng-show="popup.assignmentObject.type == 'idm' && assignmentOption.id == 'user'">
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label>{{'PROPERTY.ASSIGNMENT.ASSIGNEE' | translate}}</label>
              </div>
              <div class="col-xs-8">
                <label ng-if="!popup.assignmentObject.idm.assignee && !popup.assignmentObject.idm.assigneeField">{{'PROPERTY.ASSIGNMENT.NONE'
                  | translate}}</label>
                <ul class="simple-list"
                    ng-if="popup.assignmentObject.idm.assignee || popup.assignmentObject.idm.assigneeField">
                  <li>
                    <i class="icon icon-user"></i>
                    <span ng-if="popup.assignmentObject.idm.assignee"
                          user-name="popup.assignmentObject.idm.assignee"></span>
                    <span ng-if="popup.assignmentObject.idm.assigneeField">{{popup.assignmentObject.idm.assigneeField.name}}</span>
                    <span class="field-type"
                          ng-if="popup.assignmentObject.idm.assigneeField"> - {{popup.assignmentObject.idm.assigneeField.id}}</span>

                    <div class="actions"
                         ng-if="popup.assignmentObject.idm.assignee || popup.assignmentObject.idm.assigneeField">
                      <a ng-click="removeAssignee()"><i class="icon icon-remove"></i></a>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="form-group clearfix"
               ng-if="popup.assignmentObject.type == 'idm' && (!popup.assignmentObject.assignmentSourceType || popup.assignmentObject.assignmentSourceType == 'search') && (assignmentOption.id == 'user' || assignmentOption.id == 'users')">
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label>{{'PROPERTY.ASSIGNMENT.SEARCH' | translate}}</label>
              </div>
              <div class="col-xs-8">
                <input auto-focus class="form-control" custom-keys
                       delay="200" delayed-model="popup.filter" down-pressed="nextUser()"
                       enter-pressed="confirmUser()" id="people-select-input"
                       placeholder="{{'PROPERTY.ASSIGNMENT.PLACEHOLDER-SEARCHUSER' | translate}}"
                       type="text" up-pressed="previousUser()"/>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label></label>
              </div>
              <div class="col-xs-8">
                <div class="subtle" style="margin: 2px 0 2px 0">
                  <span translate="PROPERTY.ASSIGNMENT.MATCHING"></span>
                </div>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label></label>
              </div>
              <div class="col-xs-8">
                <div class="inline-people-select">
                  <ul class="simple-list">
                    <li ng-class="{'active': $index == popup.selectedIndex}" ng-click="confirmUser(user)"
                        ng-repeat="user in popup.userResults">
                      <div user-index="$index" user-name="user" user-picture="user"></div>
                    </li>
                  </ul>
                  <div class="nothing-to-see" ng-show="popup.userResults.length == 0"
                       translate="GENERAL.MESSAGE.PEOPLE-NO-MATCHING-RESULTS"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group clearfix"
               ng-if="popup.assignmentObject.type == 'idm' && (!popup.assignmentObject.assignmentSourceType || popup.assignmentObject.assignmentSourceType == 'search') && assignmentOption.id == 'groups'">
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label>{{'PROPERTY.ASSIGNMENT.SEARCH' | translate}}</label>
              </div>
              <div class="col-xs-8">
                <input auto-focus class="form-control" custom-keys
                       delay="200" delayed-model="popup.groupFilter"
                       down-pressed="nextGroup()"
                       enter-pressed="confirmGroup()" id="people-select-input"
                       placeholder="{{'PROPERTY.ASSIGNMENT.PLACEHOLDER-SEARCHGROUP' | translate}}"
                       type="text"
                       up-pressed="previousGroup()"/>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label></label>
              </div>
              <div class="col-xs-8">
                <div class="subtle">
                  <span translate="PROPERTY.ASSIGNMENT.MATCHING"></span>
                </div>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label></label>
              </div>
              <div class="col-xs-8">
                <div class="inline-people-select">
                  <ul class="simple-list">
                    <li ng-class="{'active': $index == popup.selectedGroupIndex}" ng-click="confirmGroup(group);"
                        ng-repeat="group in popup.groupResults">
                      {{group.name}}
                    </li>
                  </ul>
                  <div class="nothing-to-see" ng-show="popup.groupResults.length == 0"
                       translate="GENERAL.MESSAGE.GROUP-NO-MATCHING-RESULTS"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group clearfix">
            <div class="col-xs-12">
              <div class="col-xs-12">
                <label>
                  <input ng-model="assignment.initiatorCanCompleteTask" type="checkbox">
                  &nbsp;{{'PROPERTY.ASSIGNMENT.INITIATOR-CAN-COMPLETE' | translate}}
                </label>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" ng-click="close()" translate>ACTION.CANCEL</button>
        <button class="btn btn-primary" ng-click="save()" translate>ACTION.SAVE</button>
      </div>
    </div>
  </div>
